<template>
	<a-modal :confirm-loading="handing" width="540px" v-model:open="showForm" :title="title" @ok="submit">
		<a-form ref="form" :model="formData" :rules="rules" :labelCol="{ span: 5 }" :wrapper-col="{ span: 16, offset: 1 }">
			<a-form-item name="name" label="用户名" required>
				<a-input v-model:value="formData.nickname" />
			</a-form-item>
			<a-form-item name="avatar" label="用户头像" required>
				<avatar-uploader v-model:value="formData.avatar" />
			</a-form-item>
			<a-form-item name="mobile" label="手机号" required>
				<a-input v-model:value="formData.mobile" />
			</a-form-item>
		</a-form>
	</a-modal>
</template>
<script lang="ts">
import {page, form} from "@/mixins"

export default {
	mixins: [page, form],
	data() {
		return {
			title: '编辑用户',
			showForm: false as boolean,
			formPath: 'user',
			formData: {
				id: undefined,
				nickname: '' as string,
				avatar: '' as string,
				mobile: '' as string,
				intro: '' as string
			},
			rules: {
			  nickname: [{ required: true, trigger: 'change' }],
			  avatar: [{ required: true, trigger: 'change' }],
			  mobile: [{ type: 'number', min: 1, trigger: 'change', message: '手机号不能为空' }],
				intro: [{ required: true, trigger: 'change' }],
			}
		}
	},
	methods: {
		add() {
			Object.assign(this.formData, {
				id: undefined,
				nickname: '',
				avatar: ''
			})
			this.showForm = true;
		},
		edit(record : Object) {
			Object.assign(this.formData, record);
			this.showForm = true
		}
	}
}
</script>